<template>
  <div :class="['mainBox', { nanX: areaChooseValue === '南浔区' }]">
    <div class="topTitle">
      <img
        class="btnBack"
        src="../assets/Btn-Back.png"
        alt=""
        @click="backAllScreen"
      />
    </div>
    <div class="areaBox">
      <div
        :class="[
          'areaBoth',
          'allArea',
          { activeAllArea: areaChooseValue === '全市总览' },
        ]"
        @click="chooseAreaPic('全市总览')"
      >
        全市总览
      </div>
      <div
        :class="[
          'areaBoth',
          'threeArea',
          { activeArea: areaChooseValue === '南浔区' },
        ]"
        @click="chooseAreaPic('南浔区')"
      >
        南浔区
      </div>
      <div
        :class="[
          'areaBoth',
          'threeArea',
          { activeArea: areaChooseValue === 'day' },
        ]"
        @click="chooseAreaPic()"
      >
        吴兴区
      </div>
      <div
        :class="[
          'areaBoth',
          'thirdArea',
          { activeArea: areaChooseValue === 'day' },
        ]"
        @click="chooseAreaPic()"
      >
        南太湖新区
      </div>
      <div
        :class="[
          'areaBoth',
          'threeArea',
          { activeArea: areaChooseValue === 'day' },
        ]"
        @click="chooseAreaPic()"
      >
        安吉县
      </div>
      <div
        :class="[
          'areaBoth',
          'threeArea',
          { activeArea: areaChooseValue === 'day' },
        ]"
        @click="chooseAreaPic()"
      >
        德清县
      </div>
      <div
        :class="[
          'areaBoth',
          'threeArea',
          { activeArea: areaChooseValue === 'day' },
        ]"
        @click="chooseAreaPic()"
      >
        长兴县
      </div>
      <div
        :class="[
          'areaBoth',
          'threeArea',
          { activeArea: areaChooseValue === 'day' },
        ]"
        @click="chooseAreaPic()"
      >
        长合区
      </div>
    </div>
    <div class="footer"></div>
    <div class="content">
      <div class="left">
        <div class="firstDesc">
          <div class="allDescTitleL">全域概览</div>
          <div class="allDescTitleR">查看详情</div>
          <div class="zu185" @click="chooseZ1">
            <!-- 接入企业数 -->
            <img src="../assets/组 231@1x.png" alt="" />
          </div>
          <!-- 设备在线监督 -->
          <div class="zu186" @click="chooseZ2">
            <!-- 接入设备 -->
            <img src="@/assets/shebei.png" alt="" />
          </div>
          <div class="zu187">
            <!-- 接入视频数 -->
            <img src="@/assets/组 222@1x.png" alt="" />
          </div>
          <div class="zu188">
            <!-- 接入场景数-->
            <img src="../assets/组 188@1x.png" alt="" />
          </div>
          <div class="accessEnterprises accessFont" @click="chooseZ1">
            {{ globalData.companyNum }}
          </div>
          <div class="accessEnterprisesR">+{{ globalData.companyNewNum }}</div>
          <div class="accessArea accessFont">
            {{ globalData.monitoringScenariosNum }}
          </div>
          <div class="accessAreaR">+{{globalData.scenariosNewNum}}</div>
          <div class="accessDevice accessFont" @click="chooseZ2">
            {{ globalData.equipNum }}
          </div>
          <div class="accessDeviceR">+0</div>
          <div class="accessVideo accessFont">{{ globalData.videoNum }}</div>
          <div class="accessVideoR">+0</div>
        </div>
        <div class="noClearCompany">
          <div class="allDescTitleL">未清理企业</div>
          <div class="allDescTitleR">查看详情</div>
          <div class="selectCondition">
            <div class="left" @click="chooseAllUC">总览</div>
            <div class="middle">
              <div class="selectTitle">
                <div
                  style="
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                  "
                >
                  {{ areaCodeValue }}<i class="el-icon-arrow-down"></i>
                </div>
                <div class="selectBox">
                  <div
                    class="selectItem"
                    v-for="item in areaCodeList"
                    :key="item.id"
                    @click="chooseArea(item.dictName, item.id)"
                  >
                    {{ item.dictName }}
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="selectTitle2">
                <div
                  style="
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                  "
                >
                  {{ industryCategoryValue }}<i class="el-icon-arrow-down"></i>
                </div>
                <div class="selectBox2">
                  <div
                    class="selectItem2"
                    v-for="item in industryCategoryList"
                    :key="item.id"
                    @click="chooseIndustry(item.dictName, item.id)"
                  >
                    {{ item.dictName }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="lineBox">
            <div v-if="noClearCompanyList.cityList.length > 0">
              <div id="noClearCompanyLine"></div>
            </div>
            <div
              v-else
              style="color: #fff; text-align: center; margin-top: 100px"
            >
              暂无数据
            </div>
          </div>
        </div>
        <div class="alarmWarning">
          <div class="allDescTitleL">传感器报警</div>
          <div class="videoDesc">视频报警</div>
          <div class="allDescTitleR" @click="chooseAlarmW">查看详情</div>
          <div class="alarmWarningC">
            <div
              @click="chooseAlarmDate('day')"
              :class="['alarmDesc', { active: isVideoTrue === 'day' }]"
            >
              今日
            </div>
            <div
              @click="chooseAlarmDate('week')"
              :class="['alarmDesc', { active: isVideoTrue === 'week' }]"
            >
              本周
            </div>
            <div
              @click="chooseAlarmDate('month')"
              :class="['alarmDesc', { active: isVideoTrue === 'month' }]"
            >
              本月
            </div>
          </div>
          <div v-if="sensorAlarmPieList.length > 0">
            <div id="alarmDescPie"></div>
          </div>
          <div
            v-else
            style="color: #fff; text-align: center; margin-top: 100px"
          >
            暂无数据
          </div>
        </div>
      </div>
      <div class="right">
        <div class="jobSupervision">
          <div class="allDescTitleL">作业监督</div>
          <div class="allDescTitleR" @click="chooseWork">查看详情</div>
          <div class="workBox">
            <div class="noClearBusiness">
              {{ workSuperviseData.unclearEnterprisesNum }}
            </div>
            <div class="noClearBusiness alarmTody">
              {{ workSuperviseData.alarmNum }}
            </div>
          </div>
        </div>
        <div class="videoAlarmBox">
          <div class="allDescTitleL">视频报警</div>
          <div class="allDescTitleD">查看详情</div>
          <div class="alarmWarningC">
            <div
              @click="chooseVideoA('')"
              :class="['alarmDesc', { active: isVideoAlarm === '' }]"
            >
              总览
            </div>
            <div
              @click="chooseVideoA('day')"
              :class="['alarmDesc', { active: isVideoAlarm === 'day' }]"
            >
              今日
            </div>
            <div
              @click="chooseVideoA('week')"
              :class="['alarmDesc', { active: isVideoAlarm === 'week' }]"
            >
              本周
            </div>
            <div
              @click="chooseVideoA('month')"
              :class="['alarmDesc', { active: isVideoAlarm === 'month' }]"
            >
              本月
            </div>
          </div>
          <div class="companyBox">
            <div
              class="companyList"
              v-for="(item, index) in companyVideoList"
              :key="index"
            >
              <div class="left">
                <div>{{ item.enterpriseName }}</div>
                <div>{{ item.startTime }}</div>
              </div>
              <div class="right" @click="chooseBaoJ(item)">
                <img class="rightImg" src="../assets/组 74@1x.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 设备在线监督 -->
    <div class="sheBeiZuo1dialogVisible" v-if="isDialogShow === 'shebei'">
      <div class="closeX">
        <img src="../assets/组 39@1x.png" alt="" @click="closeDialogShow" />
      </div>
      <div class="title">设备在线监督</div>
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '32px',
          }"
          :header-cell-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
        >
          <el-table-column
            prop="enterpriseName"
            label="接入单位"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="sceneName"
            label="接入场景"
            width="160"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="pointName"
            label="接入点位"
            width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="equipName"
            label="接入设备"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column prop="equipStatusName" label="状态" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.equipStatusName === '在线'">{{
                scope.row.equipStatusName
              }}</span>
              <span v-else style="color: #ff9c9c">{{
                scope.row.equipStatusName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新时间"
            width="180"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.updateTime }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="params.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalItemCount"
          @size-change="handleSizeChange"
          @current-change="currentPage"
        />
      </div>
    </div>

    <!-- 报警 -->
    <div class="sheBeiZuo1dialogVisible" v-if="isDialogShow === 'baojin'">
      <div class="closeX">
        <img src="../assets/组 39@1x.png" alt="" @click="closeDialogShow" />
      </div>
      <div class="title">
        <div>{{ companyVideoItem.enterpriseName }}</div>
        <div class="subTitle">
          {{ companyVideoItem.registrationAddress }}
        </div>
      </div>
      <div class="picBox">
        <img src="../assets/组 192@1x.png" alt="" />
        <img src="../assets/组 193@1x.png" alt="" />
        <img src="../assets/组 196@1x.png" alt="" />
      </div>
    </div>

    <!-- 作业监督 -->
    <div class="sheBeiZuo1dialogVisible" v-if="isDialogShow === 'zuoye'">
      <div class="closeX">
        <img src="../assets/组 39@1x.png" alt="" @click="closeDialogShow" />
      </div>
      <div class="title">作业监督</div>
      <div class="table">
        <el-table
          :data="tableData2"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '32px',
          }"
          :header-cell-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
        >
          <el-table-column
            prop="enterpriseName"
            label="接入单位"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="workPlaceName"
            label="作业地点"
            width="160"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="clearItem"
            label="作业类型"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="taskPerson"
            label="作业人"
            width="80"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系方式"
            width="120"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="taskTime"
            label="上报时间"
            width="180"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="params2.PageIndex"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalItemCount2"
          @size-change="handleSizeChange2"
          @current-change="currentPage2"
        />
      </div>
    </div>

    <!-- 接入企业数 -->
    <div class="sheBeiZuo1dialogVisible" v-if="isDialogShow === 'jieruqiye'">
      <div class="closeX">
        <img src="../assets/组 39@1x.png" alt="" @click="closeDialogShow" />
      </div>
      <div class="title">接入企业数</div>
      <div class="table">
        <el-table
          :data="tableData3"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '32px',
          }"
          :header-cell-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#053A3B',
            color: '#2FC4B2',
            borderBottom: '1px solid #022627',
            height: '32px',
          }"
          :cell-style="{
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          @row-click="goCompany"
        >
          <el-table-column
            prop="enterpriseName"
            label="接入企业"
            width="225"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="representativePerson"
            label="负责人"
            width="225"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="representativePhone"
            label="联系电话"
            width="225"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="registrationAddress"
            label="企业地址"
            width="225"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="params3.pageNum"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalItemCount"
          @size-change="handleSizeChange3"
          @current-change="currentPage3"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  globalOverview,
  sensorAlarm,
  workSupervise,
  videoWarnInfo,
  unclearEnterprises,
  dict,
  equipMonitoringList,
  clearRecordList,
  pageList,
} from '../api/request'
export default {
  name: 'bigView',
  props: {},
  components: {},
  data() {
    return {
      tableData: [],
      tableData2: [],
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      totalItemCount: 10,
      globalData: {
        companyNum: 0,
        monitoringScenariosNum: 0,
        equipNum: 0,
        videoNum: 0,
        companyNewNum: 0,
        scenariosNewNum:0
      },
      workSuperviseData: {
        unclearEnterprisesNum: 0,
        alarmNum: 0,
      },
      isVideoTrue: 'day',
      isVideoAlarm: '',
      totalItemCount2: 10,
      params2: {
        pageNum: 1,
        pageSize: 10,
      },
      sensorAlarmPieList: [],
      areaCodeList: [],
      areaCodeValue: '按区域查看',
      industryCategoryValue: '按行业查看',
      industryCategoryList: [],
      companyVideoList: [],
      companyVideoItem: '',
      uploadLinePicList: [
        'http://60.188.49.69:8091/assets/lineLeft1.png',
        'http://60.188.49.69:8091/assets/lineLeft2.png',
        'http://60.188.49.69:8091/assets/lineLeft3.png',
        'http://60.188.49.69:8091/assets/lineLeft4.png',
        'http://60.188.49.69:8091/assets/lineLeft5.png',
      ],
      noClearCompanyList: {
        cityList: [],
        cityData: [],
        maxList: [],
        picNumList: [],
      },
      allNumList: ['1', '2', '3', '4', '5'],
      areaChooseValue: '全市总览',
      params3: {
        pageNum: 1,
        pageSize: 10,
      },
      isDialogShow: '',
      tableData3: [],
    }
  },
  created() {
    this.globalOverview()
    this.sensorAlarm('day')
    this.workSupervise()
    this.unclearEnterprises()
    this.areaCode()
    this.industryCategory()
    this.videoWarnInfo()
    console.log(11)

    this.pageList(this.params3)
  },
  methods: {
    async globalOverview() {
      const res = await globalOverview()
      for (let k in res.data) {
        if (res.data[k] === null) {
          res.data[k] = 0
        }
      }
      this.globalData = res.data
    },
    async equipMonitoringList(params) {
      const res = await equipMonitoringList(params)
      this.tableData = res.rows
    },
    async sensorAlarm(params) {
      const res = await sensorAlarm({ date: params })
      const list = res.data.slice(0, 5)
      const newList = list.map((item) => {
        return {
          value: item.companyNum,
          name: item.enterpriseName,
          itemStyle: { color: '#FF9234' },
        }
      })
      const colorList = ['#FF9234', '#5DE1D4', '#3CB7A5', '#1D7B6D', '#134D46']
      newList.forEach((item, index) => {
        item.itemStyle.color = colorList[index]
      })
      this.sensorAlarmPieList = newList
      if (this.sensorAlarmPieList.length > 0) {
        setTimeout(() => {
          this.getAlarmDescPie()
        }, 1000)
      }
    },
    async workSupervise() {
      const res = await workSupervise()
      this.workSuperviseData = res.data
    },
    createNoClearCompanyLine() {
      let line1 = this.$echarts.getInstanceByDom(
        document.getElementById('noClearCompanyLine')
      )
      console.log(line1)
      if (this.noClearCompanyList.maxList.length > 0 && line1 == null) {
        line1 = this.$echarts.init(
          document.getElementById('noClearCompanyLine')
        )
      }

      // var top10CityList = this.noClearCompanyList.cityList
      var top10CityData = this.noClearCompanyList.cityData
      var color = ['#DE0202', '#F3772A', '#F9BB5E', '#EFDF8C', '#FDF2BB']

      let lineY = []
      for (var i = 0; i < this.noClearCompanyList.cityList.length; i++) {
        var x = i
        if (x > color.length - 1) {
          x = color.length - 1
        }
        var data = {
          name: this.noClearCompanyList.cityList[i],
          color: color[x] + ')',
          value: top10CityData[i],
          itemStyle: {
            normal: {
              show: true,
              color: color[x],
              barBorderRadius: 10,
            },
          },
        }
        lineY.push(data)
      }
      line1.setOption({
        // backgroundColor: '#000',
        title: {
          show: false,
        },
        tooltip: {
          trigger: 'item',
        },
        grid: {
          borderWidth: 0,
          top: '5%',
          left: '15%',
          right: '5%',
          bottom: '3%',
        },
        color: color,
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: this.noClearCompanyList.picNumList,
            axisLabel: {
              formatter: function (value) {
                return '{' + value + '|}'
              },
              margin: 10,
              padding: [0, 0, 20, 0],
              rich: {
                1: {
                  height: 25,
                  // align: 'center',
                  backgroundColor: {
                    image: this.uploadLinePicList[0],
                  },
                },
                2: {
                  height: 25,
                  align: 'center',
                  backgroundColor: {
                    image: this.uploadLinePicList[1],
                  },
                },
                3: {
                  height: 25,
                  align: 'center',
                  backgroundColor: {
                    image: this.uploadLinePicList[2],
                  },
                },
                4: {
                  height: 25,
                  align: 'center',
                  backgroundColor: {
                    image: this.uploadLinePicList[3],
                  },
                },
                5: {
                  height: 25,
                  align: 'center',
                  backgroundColor: {
                    image: this.uploadLinePicList[4],
                  },
                },
              },
            },
          },
        ],
        xAxis: {
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: '',
            type: 'bar',
            zlevel: 2,
            barWidth: '10px',

            data: lineY,
            animationDuration: 1500,
            label: {
              normal: {
                color: '#fff',
                show: true,
                position: [0, '-24px'],
                textStyle: {
                  fontSize: 16,
                },
                formatter: function (a) {
                  return a.name
                },
              },
            },
          },
          {
            name: '未清理企业',
            type: 'bar',
            barCategoryGap: '50%',
            barWidth: '10px',
            barGap: '-100%',
            margin: '20',
            data: this.noClearCompanyList.maxList,
            textStyle: {
              //图例文字的样式
              fontSize: 10,
              color: '#fff',
            },
            itemStyle: {
              normal: {
                color: '#103F3A',
                //width:"100%",
                fontSize: 10,
                barBorderRadius: 30,
              },
            },
          },
        ],
        animationEasing: 'cubicOut',
      })
    },
    getAlarmDescPie() {
      let alarmDescPie = this.$echarts.getInstanceByDom(
        document.getElementById('alarmDescPie')
      )
      if (this.sensorAlarmPieList.length > 0 && alarmDescPie == null) {
        alarmDescPie = this.$echarts.init(
          document.getElementById('alarmDescPie')
        )
      }
      alarmDescPie.setOption({
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: 'middle',
          left: '40%',
          height: 250,
          orient: 'vertical',
          itemWidth: 15,
          textStyle: {
            fontWeight: 400,
            fontSize: 12,
            color: '#fff',
          },
        },
        series: [
          {
            type: 'pie',
            center: ['20%', '50%'],
            radius: ['50%', '85%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            labelLine: {
              show: false,
            },
            data: this.sensorAlarmPieList,
          },
        ],
      })
    },
    chooseZ2() {
      this.equipMonitoringList(this.params)
      this.isDialogShow = 'shebei'
    },
    closeDialogShow() {
      this.isDialogShow = ''
    },
    handleSizeChange() {},
    currentPage() {},
    handleSizeChange2() {},
    currentPage2() {},
    chooseBaoJ(item) {
      this.isDialogShow = 'baojin'
      this.companyVideoItem = item
    },
    async chooseAlarmDate(params) {
      this.isVideoTrue = params
      await this.sensorAlarm(params)
    },
    async videoWarnInfo(params) {
      const res = await videoWarnInfo({ date: params })
      this.companyVideoList = res.data
    },
    chooseWork() {
      this.isDialogShow = 'zuoye'
      this.clearRecordList(this.params2)
    },
    chooseAlarmW() {
      this.$router.push('/thirdView')
    },
    chooseVideoA(params) {
      this.isVideoAlarm = params
      this.videoWarnInfo(params)
    },
    chooseAllUC() {
      this.unclearEnterprises()
      this.areaCodeValue = '按区域查看'
      this.industryCategoryValue = '按行业查看'
    },
    async unclearEnterprises(areaCode, industryCategory) {
      const res = await unclearEnterprises({
        areaCode,
        industryCategory,
      })
      console.log(res)
      this.noClearCompanyList.cityList = res.data.map(
        (item) => item.enterpriseName
      )
      this.noClearCompanyList.cityData = res.data.map(
        (item) => item.clearRecordNum
      )
      let max = Math.max(this.noClearCompanyList.cityData)
      this.noClearCompanyList.maxList = this.noClearCompanyList.cityData.map(
        () => max
      )

      this.noClearCompanyList.picNumList = this.allNumList.slice(
        0,
        this.noClearCompanyList.maxList.length
      )
      if (this.noClearCompanyList.cityList.length > 0) {
        setTimeout(() => {
          this.createNoClearCompanyLine()
        }, 1000)
      }
    },
    async areaCode() {
      const res = await dict({ dictType: 'area_code' })
      this.areaCodeList = res.data
    },
    async industryCategory() {
      const res = await dict({ dictType: 'industry_category' })
      this.industryCategoryList = res.data
    },
    chooseArea(e) {
      this.areaCodeValue = e
      this.unclearEnterprises(
        this.areaCodeValue,
        this.industryCategoryValue === '按行业查看'
          ? ''
          : this.industryCategoryValue
      )
    },
    chooseIndustry(e) {
      this.industryCategoryValue = e
      this.unclearEnterprises(
        this.areaCodeValue === '按区域查看' ? this.areaCodeValue : '',
        this.industryCategoryValue
      )
    },
    async clearRecordList(params) {
      const res = await clearRecordList(params)
      this.tableData2 = res.rows
    },
    backAllScreen() {
      window.location.href = 'http://60.188.49.69:8099/#/main'
    },
    chooseAreaPic(msg) {
      this.areaChooseValue = msg
    },
    chooseZ1() {
      this.isDialogShow = 'jieruqiye'
    },
    handleSizeChange3() {},
    currentPage3() {},
    async pageList(data) {
      const res = await pageList(data)
      console.log(res)
      this.tableData3 = res.rows
    },
    goCompany(row) {
      console.log(row)
      this.$router.push({
        path: '/thirdView',
        query: {
          enterpriseName: row.enterpriseName,
          companyCode: row.companyCode,
        },
      })
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.mainBox {
  width: 1920px;
  height: 1080px;
  background-image: url('../assets/WechatIMG2357.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  box-sizing: border-box;
}
.nanX {
  background-image: url('../assets/WechatNanX.jpg');
}
.areaBox {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 78px;
  .allArea {
    background-image: url('../assets/矩形 263@1x-2.png');
    width: 96px;
  }

  .threeArea {
    background-image: url('../assets/矩形 270@1x-2.png');
    width: 80px;
  }

  .thirdArea {
    background-image: url('../assets/矩形 272@1x.png');
    width: 112px;
  }

  .areaBoth {
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #2fc4b2;
    cursor: pointer;
  }
  .activeArea {
    background-image: url('../assets/矩形 270@1x.png');
  }
  .activeAllArea {
    background-image: url('../assets/矩形 263@1x.png');
  }
}
.topTitle {
  background-image: url('../assets/headertitle.png');
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 120px;
  .btnBack {
    width: 111px;
    height: 36px;
    margin-left: 20px;
    margin-top: 8px;
  }
}

.footer {
  background-image: url('../assets/组 180@1x.png');
  width: 100%;
  height: 48px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
}

.content {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  .allDescTitleL {
    position: absolute;
    left: 30px;
    top: 7px;
    font-size: 20px;
    color: #fff;
    font-weight: 800;
  }
  .allDescTitleR {
    color: #5de1d4;
    font-size: 12px;
    position: absolute;
    right: 45px;
    top: 4px;
    cursor: pointer;
  }
  .left {
    .videoDesc {
      color: #3cb7a5;
      font-size: 20px;
      position: absolute;
      left: 170px;
      top: 7px;
    }
    .firstDesc {
      width: 420px;
      height: 282px;
      background-image: url('../assets/LEFT_01@1x (2).png');
      position: relative;
      margin-bottom: 10px;
      img {
        width: 180px;
        height: 92px;
      }
      .zu185 {
        position: absolute;
        left: 20px;
        top: 58px;
        cursor: pointer;
      }
      .zu188 {
        position: absolute;
        left: 220px;
        top: 58px;
      }
      .zu186 {
        position: absolute;
        left: 20px;
        top: 166px;
        cursor: pointer;
      }
      .zu187 {
        position: absolute;
        left: 220px;
        top: 166px;
      }

      .accessFont {
        font-size: 28px;
        color: #fff;
        font-weight: 800;
      }
      .accessFontR {
        color: #103f3a;
        font-size: 12px;
      }
      .accessEnterprises {
        position: absolute;
        left: 94px;
        top: 73px;
        cursor: pointer;
      }
      .accessEnterprisesR {
        position: absolute;
        left: 170px;
        top: 58px;
      }
      .accessArea {
        position: absolute;
        left: 294px;
        top: 75px;
      }
      .accessAreaR {
        position: absolute;
        left: 365px;
        top: 58px;
      }
      .accessDevice {
        position: absolute;
        left: 94px;
        top: 178px;
        cursor: pointer;
      }
      .accessDeviceR {
        position: absolute;
        left: 170px;
        top: 165px;
        cursor: pointer;
      }
      .accessVideo {
        position: absolute;
        left: 294px;
        top: 176px;
      }
      .accessVideoR {
        position: absolute;
        left: 365px;
        top: 165px;
      }
    }
    .noClearCompany {
      width: 420px;
      height: 346px;
      background-image: url('../assets/LEFT_02@1x.png');
      position: relative;
      margin-bottom: 10px;
      .selectCondition {
        box-sizing: border-box;
        width: 420px;
        padding-top: 32px;
        display: flex;
        justify-content: right;
        align-items: center;
        padding-right: 15px;
        font-size: 12px;

        .left {
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background-color: #5de1d4;
          color: #022627;
          border-radius: 2px;
          cursor: pointer;
        }
        .middle {
          margin-left: 2px;
          .selectTitle {
            position: relative;
            box-sizing: border-box;
            width: 88px;
            height: 20px;
            line-height: 20px;
            background-color: #022627;
            border: 1px solid #5de1d4;
            color: #5de1d4;
            text-align: center;
            line-height: 20px;
            border-radius: 2px;
            cursor: pointer;

            .selectBox {
              display: none;
              position: absolute;
              top: 20px;
              width: 88px;
              background-color: #022627;
              border: 1px solid #5de1d4;
              box-sizing: border-box;
              border-radius: 5px;
              z-index: 999;
            }
          }
          .selectItem {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .selectTitle:hover > .selectBox {
            display: block;
          }
          .selectItem:hover {
            color: #022627;
            background-color: #5de1d4;
          }
        }
        .right {
          margin-left: 2px;
          .selectTitle2 {
            position: relative;
            box-sizing: border-box;
            width: 88px;
            height: 20px;
            line-height: 20px;
            background-color: #022627;
            border: 1px solid #5de1d4;
            color: #5de1d4;
            text-align: center;
            line-height: 20px;
            border-radius: 2px;
            cursor: pointer;
            .selectBox2 {
              z-index: 999;
              display: none;
              position: absolute;
              top: 20px;
              width: 88px;
              background-color: #022627;
              border: 1px solid #5de1d4;
              box-sizing: border-box;
              border-radius: 5px;
            }
            .selectItem2 {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .selectItem2:hover {
              color: #022627;
              background-color: #5de1d4;
            }
          }
          .selectTitle2:hover > .selectBox2 {
            display: block;
          }
        }
      }
      .lineBox {
        width: 420px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        img {
          display: block;
          margin-bottom: 19px;
        }
        .lastImg {
          margin-bottom: 0;
        }
      }
      #noClearCompanyLine {
        width: 343px;
        height: 260px;
      }
    }
    .alarmWarning {
      width: 420px;
      height: 276px;
      background-image: url('../assets/组 131@1x.png');
      position: relative;
      #alarmDescPie {
        margin-top: 10px;
        margin-left: 5px;
        width: 420px;
        height: 176px;
      }
      .alarmWarningC {
        box-sizing: border-box;
        width: 420px;
        padding-top: 32px;
        display: flex;
        justify-content: right;
        align-items: center;
        padding-right: 15px;
        font-size: 12px;

        .alarmDesc {
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: #59dace;
          border-radius: 2px;
          margin-left: 5px;
          background-color: #022627;
          border: 1px solid #59dace;
          cursor: pointer;
        }
        .active {
          background-color: #5de1d4;
          color: #022627;
        }
      }
    }
  }
  .right {
    .jobSupervision {
      width: 420px;
      height: 276px;
      background-image: url('../assets/组 133@1x.png');
      position: relative;
      margin-bottom: 10px;
      .workBox {
        width: 420px;
        position: absolute;
        left: 0;
        top: 190px;
        font-size: 32px;
        font-weight: 800;
        color: #fff;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        box-sizing: border-box;
      }
      .noClearBusiness {
        text-align: center;
        width: 100px;
      }
    }
    .videoAlarmBox {
      width: 420px;
      height: 573px;
      background-image: url('../assets/Right_02@1x.png');
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      box-sizing: border-box;
      // padding-top: 81px;
      .alarmWarningC {
        box-sizing: border-box;
        width: 420px;
        padding-top: 32px;
        display: flex;
        justify-content: right;
        align-items: center;
        padding-right: 15px;
        font-size: 12px;
        margin-bottom: 33px;
        .alarmDesc {
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: #59dace;
          border-radius: 2px;
          margin-left: 5px;
          background-color: #022627;
          border: 1px solid #59dace;
          cursor: pointer;
        }
        .active {
          background-color: #5de1d4;
          color: #022627;
        }
      }
      .allDescTitleD {
        position: absolute;
        left: 328px;
        top: 4px;
        color: #5de1d4;
        font-size: 12px;
        cursor: pointer;
      }
      .companyBox {
        padding-left: 30px;
        padding-right: 14px;
        .companyList {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #fff;
          .right {
            .rightImg {
              width: 94px;
              height: 32px;
              cursor: pointer;
            }
          }
          .left {
            font-size: 14px;
            color: #fff;
          }
        }
      }
    }
  }
}
.sheBeiZuo1dialogVisible {
  width: 960px;
  height: 580px;
  background-image: url('../assets/矩形 201@1x.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 250px;
  .closeX {
    display: flex;
    justify-content: right;
    padding: 4px;
    img {
      cursor: pointer;
    }
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    padding-left: 30px;
    margin-bottom: 8px;
    .subTitle {
      color: #9e9e9e;
      font-size: 12px;
    }
  }
  .table {
    padding: 0 30px;
    .el-table .warning-row {
      background-color: transparent;
      background: #022627 !important;
    }
    .el-table::before {
      display: none;
    }
  }
  .footerPage {
    width: 100%;
    text-align: center;
    margin: 20px auto 0;

    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #62c1b2 !important; // 进行修改选中项背景和字体
      color: #fff;
    }
  }
  .picBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 44px;
    margin-bottom: -31px;
    box-sizing: border-box;
    img {
      width: 429px;
      height: 214px;
      margin-bottom: 31px;
    }
  }
}
</style>
